<template>
  <div>
    <van-search
        @input="newSearch"
        v-model="keyword"
        show-action
        :placeholder="word"
        @search="onSearch"
        @cancel="onCancel"
    />
    <template v-if="show">
        <div class="lishi">
            <h1><h2>历史记录</h2><van-icon name="delete-o" @click="del"/></h1>
            <div><p v-for="item in historyKeywordList" @click="search(item)">{{item}}</p></div>
        </div>
        <div class="remen">
            <h1>热门搜索</h1>
            <div><p v-for="item in hotKeywordList" @click="search(item.keyword)">{{item.keyword}}</p></div>
        </div>
    </template>
    <template v-else-if="show2">
        <div class="list">
            <ul>
                <li v-for="item in newList" @click="search(item)">{{item}}</li>
            </ul>
        </div>
    </template>
    <template v-else>
        <div>
            <searchPdm @classId='classId' @classPrice='classPrice' :classList='classList'/>
            <searchList :shopList='shopList'/>
        </div>
    </template>
  </div>
</template>

<script>
import searchPdm from './searchPdm.vue'
import searchList from './searchList.vue'
import {getSearchList,getSearchBox,getSearchBoxNew,searchDel} from "@/https/http"
export default {
    data(){
        return{
            show:'',//列表是否显示
            show2:'',//列表是否显示
            word:'请输入搜索关键词',
            keyword:'',//搜索词汇
            page:1,//显示页数
            size:20,//一页显示个数
            order:'desc',//排列顺序，desc表示价格由高到低，asc表示价格由低到高
            categoryId:0,//类别id，代表下拉菜单中的全部、居家等选项
            sort:'id',//可以是id或price
            shopList:[],//请求回来的商品列表
            classList:[],//分类列表，
            historyKeywordList:[],//历史列表数组
            hotKeywordList:[],//热门搜索数组
            newList:[],//实时搜索数组
            }
    },
    mounted(){
        this.show = true
        this.getshopList()
        getSearchBox().then(res=>{
            console.log(res);
            this.word = res.data.data.defaultKeyword.keyword
            this.historyKeywordList = res.data.data.historyKeywordList
            this.hotKeywordList = res.data.data.hotKeywordList
        })
    },
    methods:{
        // 删除历史记录
        del(){
            searchDel().then((val)=>{
                console.log(89456,val);
                getSearchBox().then(res=>{
                    console.log('sada',res);
                    this.word = res.data.data.defaultKeyword.keyword
                    this.historyKeywordList = res.data.data.historyKeywordList
                    this.hotKeywordList = res.data.data.hotKeywordList
                })
            })
        },
        // 实时请求,键盘输入事件
        newSearch(){
            this.show = false
            this.show2 = true
            getSearchBoxNew({keyword:this.keyword}).then(res=>{
                console.log(res);
                this.newList = res.data.data
            })
        },
        // 搜索栏传入数据
        search(val){
            this.keyword = val
            this.show = false
            this.show2 = false
            this.onSearch()
        },
        // 触发搜索
        onSearch(){
            this.show = false
            this.show2 = false
            this.getshopList()
        },
        // 点击取消
        onCancel(){
            this.$router.push('/home')
        },
        // 获取商品信息请求
        getshopList(){
            let obj = {
                keyword:this.keyword,
                page:this.page,
                size:this.size,
                order:this.order,
                categoryId:this.categoryId,
                sort:this.sort,
            }
            getSearchList(obj).then(res=>{
                this.shopList = res.data.data.data
                // 转换格式
                let classStr = JSON.stringify(res.data.data.filterCategory).replace(/name/g,'text').replace(/id/g,'value')
                this.classList = JSON.parse(classStr)
                console.log(this.classList);
            })
        },
        //分类列表的id
        classId(val){
            this.categoryId = val
            this.sort = 'price'
            this.getshopList()
        },
        // 价钱排序的格式
        classPrice(val){
            this.order = val
            this.sort = 'price'
            this.getshopList()
        }   
    },
    components:{
        searchPdm,searchList
    }
}
</script>

<style scoped lang='less'>
    .lishi,.remen{
        h1{
            margin: 15px auto;
            width: 80%;
            display: flex;
            justify-content: space-between;
        }
        div{
            display: flex;
            flex-wrap: wrap;
            padding-left: 20px;
            p{
                font-size: 10px;
                border: 1px solid gray;
                padding: 1px;
                margin: 2px;
            }
        }
    }
    .list{
        padding-left: 30px;
        li{
            margin: 10px;
            font-size: 15px;
        }
    }
</style>